<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>3d 立方体</title>
	</head>

	<body>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.warp {
				width: 500px;
				height: 500px;
				margin: 100px auto;
				position: relative;
				/* TODO */
				transform-style: preserve-3d;
				transform: rotateX(45deg) rotateY(45deg);
				animation: play 5s linear infinite;
			}

			.box {
				width: 200px;
				height: 200px;
				border: 2px solid #ccc;
				position: absolute;
				top: 150px;
				left: 150px;
			}

			.box1 {
				background: rgba(135, 135, 135, 0.3);
				transform: rotateY(90deg) translateZ(100px);
			}

			.box2 {
				background: rgba(135, 0, 255, 0.3);
				transform: rotateY(90deg) translateZ(-100px);
			}

			.box3 {
				background: rgba(255, 125, 125, 0.3);
				transform: rotateX(90deg) translateZ(-100px);
			}

			.box4 {
				background: rgba(125, 255, 125, 0.3);
				transform: rotateX(90deg) translateZ(100px);
			}

			.box5 {
				background: rgba(30, 150, 189, 0.3);
				transform: translateZ(100px);
			}

			.box6 {
				background: rgba(169, 150, 189, 0.3);
				transform: translateZ(-100px);
			}

			@keyframes play {
				from {
					transform: rotateX(0) rotateY(0) rotateZ(0);
				}

				to {
					transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);
				}
			}
		</style>
		<div class="warp">
			<div class="box box1"></div>
			<div class="box box2"></div>
			<div class="box box3"></div>
			<div class="box box4"></div>
			<div class="box box5"></div>
			<div class="box box6"></div>
		</div>
	</body>
</html>
